 

<template>
    <tm-app class="createCircle">
        <view
            style="position: fixed; top: 0; width: 750rpx; background: #fff"
            :style="{ height: systemInfo.statusBarHeight + 'px' }"
        ></view>
        <view
            class="content"
            :style="{ top: systemInfo.statusBarHeight + 'px' }"
        >
            <tm-navbar
                style="background-color: #fff"
                :height="50"
                :margin="[0, 0]"
                :padding="[0, 0]"
                :isPlace="false"
                :fontSize="32"
                :title="titleText"
                :transprent="true"
                :beforeBack="beforeBack"
            >
            </tm-navbar>

            <scroll-view class="scr" :scroll-y="true">
                <view class="card">
                    <view class="header">
                        <view class="header-left">证件类型</view>
                        <view class="header-right">身份证</view>
                    </view>
                    <view class="info">
                        <view class="header-left">真实姓名</view>
                        <input
                            v-model="realName"
							placeholder-class="header-right"
                            placeholder="请输入真实姓名"
                            class="input"
                        />
                    </view>
                    <view class="info">
                        <view class="header-left">身份证号码</view>
                        <input
                            v-model="idCard"
							placeholder-class="header-right"
                            placeholder="请输入身份证号码"
                            class="input"
                        />
                    </view>
                </view>
            </scroll-view>

            <view class="btn_bottom_box">
                <view class="btn_main_r"  @tap="VerifyRealName">
                    <text class="text">提交认证</text>
                </view>
                <view class="bottom_seat"></view>
            </view>

            <!-- <tm-button
                :width="690"
                :shadow="0"
                :linear-color="['#64F1C5', '#29DBA3']"
                linear="left"
                :fontSize="32"
                class="btn_main w-center"
                fontColor="#ffffff"
                @tap="VerifyRealName"
                label="提交认证"
            ></tm-button> -->
        </view>
    </tm-app>
</template>

<script setup lang="ts">
import {
    ref,
    reactive,
    watch,
    nextTick,
    computed,
    onMounted,
    handleError,
} from "vue";
import { onReady, onShow, onLoad, onUnload } from "@dcloudio/uni-app";
import { userData as userDataStore } from "@/store/userData";
import { systemInfo as systemInfoStore } from "@/store/systemInfo";
import { verifyRealName } from "@/api/api";
import { BASE_URL } from "@/api/request";
import { systemConfig as systemConfigStore } from "@/store/systemConfig";
import { isCH,isID, isPhone } from "@/utils/format";
const systemConfig: any = systemConfigStore();
const systemInfo: any = systemInfoStore();
const userData: any = userDataStore();

const titleText = ref("实名认证");
const realName = ref("");
const idCard = ref("");

const  goBack = () => {
	uni.navigateBack();
};

const VerifyRealName = async () => {
    if (!isCH(realName.value)) {
        uni.showToast({
            icon: "none",
            title: "您输入的姓名有误，请检查",
            duration: 2000,
        });
        return;
    }

    if (!isID(idCard.value)) {
        uni.showToast({
            icon: "none",
            title: "您输入的身份证号有误，请检查",
            duration: 2000,
        });
        return;
    }


    const params = {
        id: userData.id,
        idCard: idCard.value,
        realName: realName.value,
    };
    const res = await verifyRealName(params) as any;

    const {flag,data,message} = res;
	
    if(flag!==1){
         uni.showToast({
            icon: "none",
            title: message||'认证接口出错,请稍后再试',
            duration: 2000,
        });
        return;
    }

    if(!data.data){
         uni.showToast({
            icon: "none",
            title: '认证失败',
            duration: 2000,
        });
        return;
    }

    uni.showToast({
        icon: "none",
        title: '实名认证成功',
        duration: 2000,
    });

    userData.setUserData({isRealName:1});

    uni.$emit('realNameUpdate')
    setTimeout(()=>{
        goBack();
    },500)



};
</script>
<style lang="scss" scoped>
.createCircle {
    position: relative;
    width: 750rpx;
    height: 100%;

    .ask {
        width: 32rpx;
        height: 32rpx;
        margin-left: 5rpx;
    }

    .content {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background: #f5f5f5;
    }
    .btn_main {
        position: fixed;
        display: block;
        height: 80rpx;
        border-radius: 20rpx;
        line-height: 80rpx;
        z-index: 100;
        font-weight:bold;
    }
    .scr {
        position: absolute;
        top: 50px;
        left: 0;
        right: 0;
        bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));

        .card {
            width: 710rpx;
            height: 240rpx;
            background-color: #ffffff;
            border-radius: 10rpx;
            margin: 20rpx auto;
            .header {
                display: flex;
                align-items: center;
                justify-content: space-between;
                height: 80rpx;
                padding: 30rpx;
                .header-left {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }

                .header-right {
                    font-size: 32rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
            }
            .info {
                padding: 0 30rpx;
                width: 100%;
                height: 80rpx;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .header-left {
                    font-size: 30rpx;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                }
				.header-right {
				    font-size: 32rpx;
				    font-family: PingFangSC-Regular, PingFang SC;
				    font-weight: 400;
				}
                .input {
                    flex: 1;
                    height: 80rpx;
                    text-align: right;
                }
            }
        }
    }
}

.uni-easyinput__content {
    background-color: #f5f5f5 !important;
    padding: 0 20rpx;
}

.uni-textarea-textarea {
    font-size: 30rpx !important;
    color: $slim-text3;
}

.uni-picker-container .uni-picker-action.uni-picker-action-confirm {
    color: #1dc691 !important;
}

.uni-picker-container .uni-picker-item {
    color: #1dc691 !important;
}
</style>
